<template>
  <view class="exam-results">
    <view class="exam-results-box" :class="{ 'flip-card': true, 'is-flipped': showPractical }">
      <view class="flip-card-inner">
        <!-- 正面 - 理论成绩 -->
        <view class="flip-card-front">
          <image src="https://img.qiananquang.com/minapp/logo2.png" mode="widthFix" class="logo"></image>
          <text class="exam-results-title" :class="{ 'slide-in': showPractical }">{{ title }}</text>
          <view class="exam-results-fs">
            <view class="exam-results-score">
              <view class="exam-results-score-num">
                <text v-for="(digit, index) in scoreDigits" 
                      :key="index" 
                      class="iconfont"
                      :class="['icon-fenshu' + digit, { 'number-spin': showPractical }]">
                </text>
              </view>
              <text class="iconfont icon-fenshuxiahuaxian" :class="{ 'scale-in': showPractical }"></text>
            </view>
          </view>
          <view class="exam-results-sub-title" :class="{ 'fade-slide': showPractical }">
            （满分100分，80分及格）
            <text v-if="shouldShowReExam && !showPractical" class="re-exam-tag">补考</text>
          </view>
         
          <view class="exam-results-item">
            <text class="exam-results-item-title">{{ opcname }}</text>
          </view>
          <view class="exam-results-info">
            <view class="exam-results-info-item" style="margin-bottom: 20rpx;justify-content: space-between;">
              <view class="exam-results-info-item-left">
                <text class="exam-results-info-label">姓名:</text>
                <text class="exam-results-info-value">{{ userinfo.nickname }}</text>
              </view>
              <view class="exam-results-info-item-right">
                <text class="exam-results-info-label">联系电话:</text>
                <text class="exam-results-info-value">{{ userinfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
              </view>
            </view>
            <view class="exam-results-info-item">
              <text class="exam-results-info-label">身份证号:</text>
              <text class="exam-results-info-value">{{ userinfo.identity.replace(/(\d{6})\d{6}(\d{4})/, '$1****$2') }}</text>
            </view>
            <view class="exam-results-info-item">
              <text class="exam-results-info-label">考试时间:</text>
              <text class="exam-results-info-value">{{ examTime }}</text>
            </view>
          </view>
          <view class="exam-results-comment" :class="{ 'slide-up': showPractical }">
            <text class="exam-results-comment-title">考试评语</text>
            <template v-if="currentTheoryScore >= 80">
              <text class="exam-results-comment-content">恭喜你，顺利通过{{ title2 }}考试，期待你的表现！</text>
              <text class="exam-results-comment-content">{{ list_comment[Math.floor(Math.random() * list_comment.length)] }}</text>
            </template>
            <template v-else>
              <text class="exam-results-comment-content">很遗憾，你未通过{{ title2 }}考试，请继续努力！</text>
            </template>
          </view>
        </view>
        
        <!-- 背面 - 实操成绩 -->
        <view class="flip-card-back">
          <image src="https://img.qiananquang.com/minapp/logo2.png" mode="widthFix" class="logo"></image>
          <text class="exam-results-title" :class="{ 'slide-in': showPractical }">{{ title }}</text>
          <view class="exam-results-fs">
            <view class="exam-results-score">
              <view class="exam-results-score-num">
                <text v-for="(digit, index) in scoreDigits" 
                      :key="index" 
                      class="iconfont"
                      :class="['icon-fenshu' + digit, { 'number-spin': showPractical }]">
                </text>
              </view>
              <text class="iconfont icon-fenshuxiahuaxian" :class="{ 'scale-in': showPractical }"></text>
            </view>
          </view>
          <text class="exam-results-sub-title" :class="{ 'fade-slide': showPractical }">
            （满分100分，80分及格）
            <text v-if="shouldShowReExam && showPractical" class="re-exam-tag">补考</text>
          </text>
          <view class="exam-results-item">
            <text class="exam-results-item-title">{{ opcname }}</text>
          </view>
          <view class="exam-results-info">
            <view class="exam-results-info-item" style="margin-bottom: 20rpx;justify-content: space-between;">
              <view class="exam-results-info-item-left">
                <text class="exam-results-info-label">姓名:</text>
                <text class="exam-results-info-value">{{ userinfo.nickname }}</text>
              </view>
              <view class="exam-results-info-item-right">
                <text class="exam-results-info-label">联系电话:</text>
                <text class="exam-results-info-value">{{ userinfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
              </view>
            </view>
            <view class="exam-results-info-item">
              <text class="exam-results-info-label">身份证号:</text>
              <text class="exam-results-info-value">{{ userinfo.identity.replace(/(\d{6})\d{6}(\d{4})/, '$1****$2') }}</text>
            </view>
            <view class="exam-results-info-item">
              <text class="exam-results-info-label">考试时间:</text>
              <text class="exam-results-info-value">{{ examTime }}</text>
            </view>
          </view>
          <view class="exam-results-comment" :class="{ 'slide-up': showPractical }">
            <text class="exam-results-comment-title">考试评语</text>
            <template v-if="currentPracticalScore >= 80">
              <text class="exam-results-comment-content">恭喜你，顺利通过{{ title2 }}考试，期待你的表现！</text>
              <text class="exam-results-comment-content">{{ list_comment[Math.floor(Math.random() * list_comment.length)] }}</text>
            </template>
            <template v-else>
              <text class="exam-results-comment-content">很遗憾，你未通过{{ title2 }}考试，请继续努力！</text>
            </template>
          </view>
        </view>
      </view>
    </view>
    
    <view class="exam-results-btn">
      <button open-type="share">
        <text class="iconfont icon-fenxiang1"></text>分享成绩
      </button>
      <button @click="toggleScore">
        <text class="iconfont icon-fangdajing"></text>
        {{ showPractical ? '返回理论成绩' : '查看实操成绩' }}
      </button>
    </view>
  </view>
</template>

<script>
import { parseTime } from '@/utils/tools.js'

export default {
  data() {
    return {
      parseTime,
      examData: {},
      userinfo:{},
      tpScore: {},
      opc: '',
      title: '理论考试成绩',
      title2: '理论考试',
      opcname: '',
      scoreNum: ['icon-fenshu0', 'icon-fenshu1', 'icon-fenshu2', 'icon-fenshu3', 'icon-fenshu4', 'icon-fenshu5', 'icon-fenshu6', 'icon-fenshu7', 'icon-fenshu8', 'icon-fenshu9', 'icon-fenshu10'],
      list_comment: [
        '命运如同手中的掌纹,无论多曲折终掌握在自己手中!',
        '感谢努力的自己,留下的汗水终究是浇灌成功之花的甘露',
        '感谢努力的自己,珍惜每份付出的收获让梦想照进现实',
        '感谢你的辛勤付出,考试通过就是对你努力与坚持的最大肯定',
        '那些默默加班的夜晚,它们见证了你的成长与蜕变愿你在未来的道路上继续保持这份努力',
        '学而时习之不亦说乎！',
      ],
      score: 0,
      showPractical: false, // 是否显示实操成绩
    }
  },
  onLoad(options  ) {
    this.userinfo = uni.getStorageSync('userinfo')
    this.tpScore = uni.getStorageSync('tpScore')
    this.score = this.tpScore?.theoryScore || 0
    this.opc = options.opc
    this.opcname = options.opcname
    this.title = '理论考试成绩'
    this.title2 = '理论考试'
    // this.$nextTick(() => {
    //   this.checkScore()
    // })
  },
  methods: {
    checkScore() {
      if (!this.tpScore || !this.tpScore.theoryScore) {
        uni.showToast({
          title: '暂无成绩数据',
          icon: 'none'
        })
      }
    },
    toggleScore() {
      if(this.tpScore.practicalScore == '') {
        uni.showToast({
          title: '实操成绩未出',
          icon: 'none'
        })
        return
      }
      // 切换显示状态
      this.showPractical = !this.showPractical
      
      // 等待翻转动画完成后更新数据
      setTimeout(() => {
        this.title2 = this.showPractical ? '实操考试' : '理论考试'
      }, 300)
    }
  },
  onShareAppMessage(res) {
    console.log(res, 'res');

    // if (res.from === 'button') {// 来自页面内分享按钮
    //   console.log(res.target)
    // }
    return {
      title: '我的考试已经通过，快来看看你的成绩吧！',
      path: '/pages/userInfo/userInfo'
    }
  },
  computed: {
    // 当前理论成绩
    currentTheoryScore() {
      const { theoryScore, theoryReScore, theoryRetakeTime } = this.tpScore
      // 如果初考及格，显示初考成绩
      if (theoryScore >= 80) return theoryScore
      
      // 如果有补考时间且补考时间已过，且有补考成绩，显示补考成绩
      const now = Date.now()
      if (theoryRetakeTime && now > new Date(theoryRetakeTime).getTime() && theoryReScore) {
        return theoryReScore
      }
      
      // 否则显示初考成绩
      return theoryScore
    },
    
    // 当前实操成绩
    currentPracticalScore() {
      const { practicalScore, practicalReScore, practicalRetakeTime } = this.tpScore
      // 如果初考及格，显示初考成绩
      if (practicalScore >= 80) return practicalScore
      
      // 如果有补考时间且补考时间已过，且有补考成绩，显示补考成绩
      const now = Date.now()
      if (practicalRetakeTime && now > new Date(practicalRetakeTime).getTime() && practicalReScore) {
        return practicalReScore
      }
      
      // 否则显示初考成绩
      return practicalScore
    },
    
    // 当前显示的分数
    currentScore() {
      return !this.showPractical ? this.currentTheoryScore : this.currentPracticalScore
    },
    
    // 当前显示的标题
    title() {
      return !this.showPractical ? '理论考试成绩' : '实操考试成绩'
    },
    
    // 计算当前考试类型
    title2() {
      return !this.showPractical ? '理论考试' : '实操考试'
    },
    
    scoreDigits() {
      let score = this.currentScore
      console.log('当前分数:', score)
      
      let paddedScore = ''
      if (score === 100) {
        paddedScore = '100'
      } else if (score >= 10) {
        paddedScore = String(score)
      } else {
        paddedScore = '0' + String(score)
      }
      
      console.log('格式化后的分数:', paddedScore)
      return paddedScore.split('')
    },
    
    // 是否显示补考标记
    shouldShowReExam() {
      if (!this.showPractical) {
        // 理论考试：初考不及格且补考时间已过且有补考成绩
        const now = Date.now()
        return this.tpScore.theoryScore < 80 && 
               this.tpScore.theoryRetakeTime &&
               now > new Date(this.tpScore.theoryRetakeTime).getTime() &&
               this.tpScore.theoryReScore
      } else {
        // 实操考试：初考不及格且补考时间已过且有补考成绩
        const now = Date.now()
        return this.tpScore.practicalScore < 80 && 
               this.tpScore.practicalRetakeTime &&
               now > new Date(this.tpScore.practicalRetakeTime).getTime() &&
               this.tpScore.practicalReScore
      }
    },
    
    // 显示考试时间
    examTime() {
      if (!this.showPractical) {
        // 理论考试时间
        const { theoryScore, theoryReScore, theoryRetakeTime } = this.tpScore
        if (theoryScore >= 80) return this.parseTime(this.tpScore.theoryTime)
        
        const now = Date.now()
        if (theoryRetakeTime && now > new Date(theoryRetakeTime).getTime() && 
            theoryReScore) {
          return this.parseTime(theoryRetakeTime)
        }
        return this.parseTime(this.tpScore.theoryTime)
      } else {
        // 实操考试时间
        const { practicalScore, practicalReScore, practicalRetakeTime } = this.tpScore
        if (practicalScore >= 80) return this.parseTime(this.tpScore.practicalTime)
        
        const now = Date.now()
        if (practicalRetakeTime && now > new Date(practicalRetakeTime).getTime() && 
            practicalReScore) {
          return this.parseTime(practicalRetakeTime)
        }
        return this.parseTime(this.tpScore.practicalTime)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
}

.exam-results {
  height: 100vh;
  width: 100%;
  background-color: #FB3E2D;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;

  .exam-results-box {
 
    perspective: 1000px;
    transform-style: preserve-3d;
    
    &.flip-card {
      position: relative;
      width: 100%;
      height: calc(100vh - 115rpx);
      
      .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
      }
      
      &.is-flipped .flip-card-inner {
        transform: rotateY(180deg);
      }
      
      .flip-card-front,
      .flip-card-back {
       display: flex;
    flex-direction: column;
    align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        background-repeat: repeat;
        background-image: url('https://img.qiananquang.com/minapp/cjbg.png');
        padding: 50rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        
        &:after,
        &:before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          pointer-events: none;
          background: url('https://img.qiananquang.com/minapp/bk.png') 20rpx 20rpx no-repeat;
          background-size: calc(100% - 40rpx) calc(50% - 20rpx);
        }
        
        &:before {
          transform: rotate(180deg);
        }
      }
      
      .flip-card-front {
        transform: rotateY(0deg);
      }
      
      .flip-card-back {
        transform: rotateY(180deg);
      }
    }

    .logo {
      width: 185rpx;
      height: 85rpx;
      margin-bottom: 30rpx;
    }

    .exam-results-title {
      font-weight: 700;
      font-size: 34rpx;
      color: #36373D;
      display: block;
      text-align: center;
      margin-bottom: 10rpx;
      transition: all 0.3s ease;
      
      &.slide-in {
        animation: slideIn 0.5s ease;
      }
    }

    .exam-results-sub-title {
      font-weight: 500;
      font-size: 26rpx;
      color: #666666;
      display: block;
      margin-bottom: 20rpx;
      text-align: center;
      transition: all 0.3s ease;
      
      &.fade-slide {
        animation: fadeSlide 0.6s ease;
      }
    }

    .exam-results-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100rpx;
      border-radius: 10rpx;

      .exam-results-item-title {
        font-weight: 600;
        font-size: 42rpx;
        color: #FC3B2A;
        padding-bottom: 10rpx;
        border-bottom: 3rpx solid #424242FF;

      }
    }
  }

  .exam-results-fs {
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 0 60rpx;
  }

  .exam-results-score {
    color: #FC3B2A;
    font-size: 42rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .exam-results-score-num {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .iconfont {
        font-size: 120rpx;
        color: #FD3523;
        margin: 0 4rpx;
        width: 100rpx;
        text-align: center;
        line-height: 120rpx;
        display: inline-block;
        vertical-align: middle;
        transition: all 0.3s ease;
        
        &.number-spin {
          animation: numberFlip 0.6s ease;
        }
      }
    }

    .icon-fenshuxiahuaxian {
      font-size: 60rpx;
      transition: all 0.3s ease;
      
      &.scale-in {
        animation: scaleIn 0.6s ease;
      }
    }
  }

  .exam-results-info {
    margin-top: 30rpx;
    width: 100%;



    .exam-results-info-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 0 80rpx;

      .exam-results-info-label {
        font-weight: 500;
        font-size: 30rpx;
        color: #666666;
        min-width: 150rpx;
      }

      .exam-results-info-value {
        font-weight: 600;
        font-size: 30rpx;
        color: #36373D;
      }
    }
  }

  .exam-results-comment {
    background-color: #d5d5d566;
    font-size: 30rpx;
    color: #36373D;
    padding: 20rpx 30rpx;
    border-radius: 10rpx;
    margin: 30rpx;
    font-family: 'FZKangTi-S07';
    .exam-results-comment-title{
      font-size: 40rpx;
      color: #36373D;
      font-weight: 700;
      display: block;
      text-align: center;
      margin-bottom: 20rpx;
    }
    .exam-results-comment-content{
      text-indent: 2em;
      font-size: 34rpx;
      color: #36373D;
      font-weight: 500;
      line-height: 60rpx;
      display: block;
    }
    transition: all 0.3s ease;
    
    &.slide-up {
      animation: slideUp 0.6s ease;
    }
  }

  .exam-results-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    transition: all 0.3s ease;
    
    &.btn-slide {
      animation: btnSlide 0.6s ease;
    }

    button {
      width: 300rpx;
      height: 85rpx;
      background-image: linear-gradient(to right, #FFFFFF, #ED6C63);
      box-shadow: 0 0 10rpx 0 #83322C;
      background-size: 100% 100%;
      border-radius: 44rpx;
      color: #E23321;
      font-size: 30rpx;
      font-weight: bold;
      margin: 0;
      padding: 0;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        opacity: 0.9;
      }
    }
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes numberFlip {
  0% {
    opacity: 0;
    transform: rotateX(-180deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateX(-20rpx);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes btnSlide {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.re-exam-tag {
  display: inline-block;
  margin-left: 20rpx;
  padding: 4rpx 12rpx;
  background: #FF4D4F;
  color: #fff;
  font-size: 24rpx;
  border-radius: 8rpx;
}
</style>